<template>
  <view class="page-container">
    <view class="container">
      <!-- 用户信息区域 -->
      <view class="user-section">
        <view class="user-info" @click="handleLogin">
          <image class="avatar" :src="userInfo.avatarUrl || '/static/images/index_page.png'" mode="aspectFill" />
          <view class="login-info">
            <text class="login-text">{{ userInfo.nickName || '注册 / 登录' }}</text>
            <text class="login-desc">{{ userInfo.nickName ? '欢迎回来' : '马上注册，使用更多功能' }}</text>
          </view>
        </view>
      </view>

      <!-- 功能按钮组 -->
      <view class="function-group">
        <view class="function-item" @click="goToOrders">
          <image src="/static/images/index_page.png" mode="aspectFit" />
          <text>我的订单</text>
        </view>
        <view class="function-item" @click="goToCards">
          <image src="/static/images/index_page.png" mode="aspectFit" />
          <text>我的卡包</text>
        </view>
        <view class="function-item" @click="goToOperateList">
          <image src="/static/images/index_page.png" mode="aspectFit" />
          <text>脱毛记录</text>
        </view>
      </view>

      <!-- 菜单列表 -->
      <view class="menu-list">
        <view class="menu-item" @click="goToPoints">
          <image src="/static/images/index_page.png" mode="aspectFit" />
          <text>积分兑换</text>
        </view>
        <view class="menu-item" @click="goToAboutUs">
          <image src="/static/images/index_page.png" mode="aspectFit" />
          <text>关于我们</text>
        </view>
      </view>

      <!-- 使用登录组件 -->
      <login-modal
        ref="loginModal"
        :show="showLoginModal"
        @login-success="onLoginSuccess"
      />
    </view>
  </view>
</template>

<script>
import config from '@/config/config.js'
import LoginModal from '@/components/login-modal/index.vue'

export default {
  components: {
    'login-modal': LoginModal
  },
  data() {
    return {
      userInfo: {},
      tempUserInfo: {
        openid: '',
        avatarUrl: '',
        nickName: '',
		
      },
      showAvatarModal: false,
      showPhoneModal: false,
      loginStep: 1,
      showLoginModal: false
    }
  },
  onLoad() {
    this.getUserInfoFromStorage()
  },
  onShow() {
    this.getUserInfoFromStorage()
  },
  methods: {
    // 从本地存储获取用户信息
    getUserInfoFromStorage() {
      try {
        const userInfoStr = uni.getStorageSync('userInfo')
        if (userInfoStr) {
          // 判断是否已经是对象
          this.userInfo = typeof userInfoStr === 'object' ? 
            userInfoStr : 
            JSON.parse(userInfoStr)
        } else {
          this.userInfo = {}
        }
      } catch (e) {
        console.error('获取本地用户信息失败', e)
        this.userInfo = {}
      }
    },

    // 处理登录
    async handleLogin() {
      if (this.userInfo.nickName) {
        if (!this.userInfo.phone) {
          this.loginStep = 2
          this.showPhoneModal = true
        }
        return
      }
      
      this.showLoginModal = true
      this.$refs.loginModal.startLogin()
    },

    // 登录成功回调
    onLoginSuccess(userInfo) {
      this.userInfo = userInfo
      this.showLoginModal = false
      uni.showToast({
        title: '登录成功',
        icon: 'success'
      })
    },

    // 其他导航方法保持不变
    goToOrders() {
      uni.navigateTo({
        url: '/subpages/orders/orders'
      })
    },
    goToCards() {
      uni.navigateTo({
        url: '/subpages/cards/cards'
      })
    },
    goToOperateList() {
      uni.navigateTo({
        url: '/subpages/operateList/operateList'
      })
    },
    goToAboutUs() {
      uni.navigateTo({
        url: '/subpages/aboutus/aboutus'
      })
    },
    goToPoints() {
      uni.navigateTo({
        url: '/subpages/points/points'
      })
    }
}
}
</script>

<style scoped>
.page-container {
  position: relative;
  min-height: 100vh;
}

.container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.user-section {
  background-color: #000000;
  padding: 80px 30px 30px;
  display: flex;
  justify-content: flex-start;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 20px;
}

.avatar {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background-color: #fff;
}

.login-info {
  display: flex;
  flex-direction: column;
}

.login-text {
  font-size: 20px;
  font-weight: bold;
  color: #ffffff;
}

.login-desc {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 8px;
}

.function-group {
  margin: 20px;
  background-color: #fff;
  border-radius: 10px;
  padding: 15px;
  display: flex;
  justify-content: space-around;
}

.function-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  flex: 1;
}

.function-item image {
  width: 30px;
  height: 30px;
}

.function-item text {
  font-size: 14px;
  color: #333;
}

.menu-list {
  margin: 20px;
  background-color: #fff;
  border-radius: 10px;
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 15px;
  border-bottom: 1px solid #f5f5f5;
}

.menu-item:last-child {
  border-bottom: none;
}

.menu-item image {
  width: 24px;
  height: 24px;
  margin-right: 10px;
}

.menu-item text {
  font-size: 16px;
  color: #333;
}

/* 添加头像选择弹框样式 */
.avatar-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

.modal-content {
  background-color: #fff;
  border-radius: 12px;
  padding: 20px;
  width: 80%;
  max-width: 300px;
}

.modal-title {
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 20px;
}

.avatar-btn {
  width: 100%;
  height: 44px;
  line-height: 44px;
  background-color: #000;
  color: #fff;
  border-radius: 22px;
  font-size: 16px;
}

/* 添加手机号弹框样式 */
.phone-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

.modal-content {
  background-color: #fff;
  border-radius: 12px;
  padding: 30px;
  width: 80%;
  max-width: 300px;
}

.modal-title {
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

.modal-desc {
  text-align: center;
  font-size: 14px;
  color: #666;
  margin-bottom: 20px;
}

.phone-btn {
  width: 100%;
  height: 44px;
  line-height: 44px;
  background-color: #000;
  color: #fff;
  border-radius: 22px;
  font-size: 16px;
}
</style>
